<template>
  <div :class="$style.modalPop" @click="close">
    <div :class="$style.modalPopBox" @click.stop>
      <div :class="$style.modalPopTitle">
        <div :class="$style.modalPopTitleText">个人中心</div>
        <img @click="close" :class="$style.modalPopTitleIcon" loading="lazy" alt="" src="/quxiaohei.png" />
      </div>
      <div :class="$style.modalPopContent">
        <div :class="$style.modalPopLeft">
          <div :class="$style.modalPopMenu" v-for="(item, index) in menuList" :key="index" @click="changeMenu(index)">
            <img :class="$style.menuIcon" :src="menuIndex == index ? item.icon1 : item.icon2" alt="" />
            <div :class="[$style.menuText, menuIndex == index ? $style.menuBlue : '']">{{ item.name }}</div>
          </div>
        </div>
        <div :class="$style.modalPopRight">
          <component :ref="activeTab" :is="activeTab" @addCard="addCard" @backCard="backCard" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent } from "vue";
import Modal3 from "../components/Modal3.vue";
import GreenModal from "../components/GreenModal.vue";
import BlueModal from "../components/BlueModal.vue";
import GbModal from "../components/GbModal.vue";
import GwModal from "../components/GwModal.vue";
import RedModal from "../components/RedModal.vue";
import ModalB from "../components/ModalB.vue";
import WhiteModal from "../components/WhiteModal.vue";
import WhiteModal3 from "../components/WhiteModal3.vue";
import OrangeModal from "../components/OrangeModal.vue";
import RgModal1 from "../components/RgModal1.vue";
import WhiteModal1 from "../components/WhiteModal1.vue";
import WhiteModal2 from "../components/WhiteModal2.vue";
import WhiteModal4 from "../components/WhiteModal4.vue";
import LogoutModal from "../components/LogoutModal.vue";
export default defineComponent({
  name: "ModalPop",
  components: {
    Modal3,
    GreenModal,
    BlueModal,
    GbModal,
    GwModal,
    RedModal,
    ModalB,
    WhiteModal,
    WhiteModal3,
    OrangeModal,
    RgModal1,
    WhiteModal1,
    WhiteModal2,
    WhiteModal4,
    LogoutModal,
  },
  data() {
    return {
      activeTab: 'Modal3',
      menuList: [
        { name: '个人资料', comp: 'Modal3', icon1: '/gerenziliao1.png', icon2: '/gerenziliao2.png' },
        { name: '实名认证', comp: 'GreenModal', icon1: '/shimingrenzheng1.png', icon2: '/shimingrenzheng2.png' },
        { name: '银行卡', comp: 'BlueModal', icon1: '/yinhangka1.png', icon2: '/yinhangka2.png' },
        { name: '入金', comp: 'RedModal', icon1: '/rujin1.png', icon2: '/rujin2.png' },
        { name: '出金', comp: 'ModalB', icon1: '/chujin1.png', icon2: '/chujin2.png' },
        { name: '出入金记录', comp: 'WhiteModal', icon1: '/churujinjilu1.png', icon2: '/churujinjilu2.png' },
        { name: '账单', comp: 'WhiteModal3', icon1: '/zhangdan1.png', icon2: '/zhangdan2.png' },
        { name: '模拟账户重置', comp: 'OrangeModal', icon1: '/monizhanghuchongzhi1.png', icon2: '/monizhanghuchongzhi2.png' },
        { name: '市场模式', comp: 'RgModal1', icon1: '/shichangmoshi1.png', icon2: '/shichangmoshi2.png' },
        { name: '修改密码', comp: 'WhiteModal1', icon1: '/xiugaimima1.png', icon2: '/xiugaimima2.png' },
        { name: '推荐返佣', comp: 'WhiteModal2', icon1: '/tuijianfanyong1.png', icon2: '/tuijianfanyong2.png' },
        { name: '我的通知', comp: 'WhiteModal4', icon1: '/wodetongzhi1.png', icon2: '/wodetongzhi2.png' },
        { name: '退出登录', comp: 'LogoutModal', icon1: '/tuichudenglu1.png', icon2: '/tuichudenglu2.png' },
      ],
      menuIndex: 0,
      accountType: 0,
    };
  },
  methods: {
    backCard(val) {
      this.activeTab = 'BlueModal';
      this.$nextTick(() => {
        this.$refs.BlueModal.tabIndex = val;
      })
    },
    addCard(val) {
      if (val == 0) {
        this.activeTab = 'GbModal';
      } else if (val == 1) {
        this.activeTab = 'GwModal';
        this.$nextTick(()=>{
          this.$refs.GwModal.getCoinlist();
        })
      }
    },
    changeMenu(index) {
      this.menuIndex = index;
      this.activeTab = this.menuList[index].comp;
      if(this.activeTab=='OrangeModal'){
        this.$nextTick(()=>{
          this.$refs.OrangeModal.accountType=this.accountType;
        })
      }      
    },
    close() {
      this.$emit('close');
    },
  },
});
</script>
<style module>
.modalPop {
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

.modalPopBox {
  width: 50%;
  background-color: var(--color-white);
  box-shadow: 0px 0px 30px 0px #C2C2C2;
  border-radius: 6px;
  min-width: 835px;
}

.modalPopTitle {
  width: 100%;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 19px;
  border-bottom: 1px solid #DCDFE6;
}

.modalPopTitleText {
  font-family: Source Han Sans;
  font-size: 18px;
  font-weight: 300;
  color: #515A6E;
}

.modalPopTitleIcon {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.modalPopContent {
  width: 100%;
  height: 595px;
  display: flex;
}

.modalPopLeft {
  width: 150px;
  height: 100%;
  box-sizing: border-box;
  padding: 5px 0;
  border-right: 1px solid #DCDFE6;
  overflow-y: auto;
}

.modalPopMenu {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 15px;
  cursor: pointer;
  margin-bottom: 5px;
}

.modalPopIcon {
  width: 16px;
  height: 16px;
}

.menuText {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 350;
  color: #515A6E;
  margin-left: 15px;
}

.menuBlue {
  color: #1890FF;
}

.modalPopRight {
  width: calc(100% - 150px);
  height: 100%;
}
</style>